import React, {Fragment, lazy, Suspense} from 'react';
import {changeTdk, goSystem, setScrollTop} from '../../assets/js/utils';
import hoc from './indexHoc';
import ScrollAnim from "rc-scroll-anim/es";
import 'swiper/swiper-bundle.css';
import Css from '../../assets/css/nj/index.css';

const Nav=lazy(()=>import('../../components/nav/index'));
const RNav=lazy(()=>import('../../components/rNav/index'));
const Foot=lazy(()=>import('../../components/foot/index'));
const ScrollParallax =  ScrollAnim.Parallax;

const NjComponent=hoc((props)=>{

    return(
        <React.Fragment>
            <div className={Css['nj_banner']} id='indSuccess'>
                {
                    props.aBan.img?
                        <ScrollParallax
                            location='indSuccess'
                            animation={{y:0, playScale: [0.9, 1.5]}}
                            style={{backgroundImage:'url('+props.aBan.img+')'}}
                            className={Css['nj_ban_bg']}
                        ></ScrollParallax>
                        :''
                }

                <div className={Css['njBanCen']}>
                    <p>
                        <strong>{props.aBan.title}</strong>
                        {props.aBan.list}
                    </p>
                    <div className={Css['njBanBtn']} id='njBan' onClick={props.goPages.bind(this,props.aBan.url)}>{props.aBan.btn}</div>
                </div>
            </div>
            <div className={Css['nj_combo']}>
                <div className={Css['nj_combo_cen']}>
                    <div className={Css['ni_title']}>
                        <p>标准节日套餐</p>
                        畅销13年的经典福利产品
                    </div>
                    <div className={Css['nj_combo_pro']}>
                        <ul>
                            {
                                props.aPro.pro!==undefined?
                                    props.aPro.pro.map((item,index)=>{
                                        return(
                                            <li key={index}>
                                                <i className={item.icn}></i>
                                                <span>{item.title}</span>
                                            </li>
                                        )
                                    })
                                    :""
                            }
                        </ul>
                    </div>
                </div>
                <div className={Css['nj_combo_online']}>
                    <div className={Css['nj_combo_online_cen']}>
                        <ul>
                            {
                                props.aPro.unLine!==undefined?
                                    props.aPro.unLine.map((item,index)=>{
                                        return(
                                            <li key={index}>
                                                <div className={index===0?Css['nj_combo_online_cen_title']:Css['nj_combo_online_cen_title']+' '+Css['nj_combo_online_cen_title_er']}>
                                                    <i className={item.icn}></i>
                                                    <span>{item.title}</span>
                                                    <span>{item.titleList}</span>
                                                </div>
                                                <div className={Css['nj_combo_online_cen_img']}>
                                                    <img src="//www.guanaitong.com/images/loading.gif" data-echo={item.img} alt='' />
                                                </div>
                                                <div className={Css['nj_combo_online_cen_font']}>
                                                    <div className={index===0?Css['nj_combo_online_cen_title']+' '+Css['nj_combo_online_cen_titleer']:Css['nj_combo_online_cen_title']+' '+Css['nj_combo_online_cen_titleer']+' '+Css['nj_combo_online_cen_title_er']}>
                                                        <i className={item.icn}></i>
                                                        <span>{item.title}</span>
                                                        <span>{item.titleList}</span>
                                                    </div>
                                                    <span dangerouslySetInnerHTML={{__html: item.list}}></span>
                                                </div>
                                            </li>
                                        )
                                    })
                                    :''
                            }
                        </ul>
                    </div>
                    <div className={Css['nj_combo_prep']}>
                        <ul>
                            {
                                props.aPro.aSup!==undefined?
                                    props.aPro.aSup.map((item,index)=>{
                                        return(
                                            <li key={index}>
                                                <i className={item.icn}></i>
                                                <span dangerouslySetInnerHTML={{__html:item.title}}></span>
                                            </li>
                                        )
                                    })
                                    :""
                            }
                        </ul>
                    </div>
                </div>
                <div className={Css['nj_title30']}>
                    支持定制其他节日与礼赠方案
                </div>
                <div className={Css['nj_btn']} id="nj_btn1"  onClick={props.goPages.bind(this,props.aPro.url)}>立即咨询</div>
            </div>
            <div className={Css['nj_group']}>
                <div  className={Css['nj_group_ban']}>
                    <ScrollParallax
                        className={Css['nj_group_ban_bg']}
                        animation={{y:0, playScale: [0.2, 1.5]}}
                        style={{backgroundImage: 'url('+require('../../assets/images/nj/nj4.jpg')+')'}}

                    >

                    </ScrollParallax>
                    <div className={Css['nj_title46']}>
                        实物团购
                        <p>百亿级流量议价能力<br />
                            为您带来最优惠的价格<br />
                            海量一线品牌品质保障<br />
                            最低3折起</p>
                    </div>
                </div>

                <div className={Css['nj_titie36']}>热卖商品</div>
                <div className={Css['nj_swiper_seed']+' swiper-container nj_swiper_seed'}>
                    <div className="swiper-wrapper">
                        {
                            props.aSeed.aSeedSwiper!==undefined?
                                props.aSeed.aSeedSwiper.map((item,index)=>{
                                    return(
                                        <div className="swiper-slide" key={index}>
                                            <div className={Css['nj_swiper_br']}>
                                                <div className={Css['nj_swiper_img']}>
                                                    <img data-src={item.img} className="swiper-lazy" alt='' />
                                                </div>
                                                <div className={Css['activeLoading']}></div>
                                                <div className={Css['nj_swiper_font']}><strong>{item.pp}</strong>{item.name}</div>
                                            </div>
                                        </div>
                                    )
                                })
                                :''
                        }
                    </div>
                    <div className={Css['nj_swiper_seed_pagination']+' nj_swiper_seed_pagination'}></div>
                </div>

                <div className={Css['nj_titie36']}>合作品牌</div>
                <div className={Css['nj_title24']}>节日礼盒/品牌食品/实用家电/精品家纺</div>
                {
                    props.aSeed.aSeedLogo!==undefined?
                        props.aSeed.aSeedLogo.map((item,index)=>{
                            return(
                                <div className={Css['nj_combo_log']} key={index}>
                                    <ul>
                                        {
                                            item.logo.length>0?
                                                item.logo.map((item2,index2)=>{
                                                    return(
                                                        <li key={index2}><img src="//www.guanaitong.com/images/loading.gif" data-echo={item2.logoImg} alt='' /></li>
                                                    )
                                                })
                                                :''
                                        }
                                    </ul>
                                </div>
                            )
                        })
                        :''
                }
                <div className={Css['nj_combo_btn']} id="nj_combo_btn" onClick={props.goPages.bind(this,props.aSeed.url)}>更多团购品牌请咨询客服</div>
            </div>
            <div className={Css['nj_cus']}>
                <div className={Css['ni_title']}>
                    <p>全方位福利定制服务</p>
                    我们在意您的一切个性化需求
                </div>
                <div className={Css['nj_cus_bg']} style={{backgroundImage:'url('+require('../../assets/images/nj/nj5.jpg')+')'}}>
                    <div className={Css['nj_cus_cen']}>
                        <div className={Css['nj_swiper_cus_small'] +' swiper-container'} id="thumbs">
                            <div className="swiper-wrapper">
                                {
                                    props.aCus.aCusSmall!==undefined?
                                        props.aCus.aCusSmall.map((item,index)=>{
                                            return(
                                                <div className={Css['nj_swiper_cus_items']+' swiper-slide'} key={index}  onMouseEnter={props.onMouseEnter.bind(this,index)}>
                                                    <div className={Css['nj_swiper_cus_small_cen']}>
                                                        <div className={Css['nj_swiper_cus_title']}>{item.title}</div>
                                                        <div className={Css['nj_swiper_cus_titleER']} dangerouslySetInnerHTML={{__html:item.list}}></div>
                                                        <div className={Css['nj_swiper_cus_bg']}></div>
                                                    </div>
                                                </div>
                                            )
                                        })
                                        :''
                                }
                            </div>
                        </div>
                        <div className={Css['nj_swiper_cus_big']+' swiper-container'} id="gallery">
                            <div className='swiper-wrapper'>
                                {
                                    props.aCus.aCusBid!==undefined?
                                        props.aCus.aCusBid.map((item,index)=>{
                                            return(
                                                    <div className="swiper-slide " key={index}>
                                                        <div className={Css['nj_swiper_cus_big_img']}>
                                                            {
                                                                index!==2?
                                                                    <img data-src={item.img}
                                                                         className="swiper-lazy" alt={''}/>
                                                                    :
                                                                    <div className="swiper-container" id="nj_swiper_cus_big">
                                                                        <div className="swiper-wrapper">
                                                                            {
                                                                                item.aImg.length>0?
                                                                                    item.aImg.map((item2,index2)=>{
                                                                                        return(
                                                                                            <div className="swiper-slide" key={index2}>
                                                                                                <div className={Css['nj_swiper_cus_big_img_width']}>
                                                                                                    <img data-src={item2.img} className="swiper-lazy" alt={''} />
                                                                                                </div>
                                                                                            </div>
                                                                                        )
                                                                                    })
                                                                                    :''
                                                                            }
                                                                        </div>
                                                                        <div className={Css['nj_swiper_cus_big_pagination']+' nj_swiper_cus_big_pagination'}></div>
                                                                    </div>

                                                            }

                                                        </div>
                                                        <div className={Css['activeLoading']}></div>
                                                    </div>
                                            )
                                        })
                                        :''
                                }

                                <div className="swiper-slide ">
                                    <div className={Css['nj_swiper_cus_big_img']}>
                                        <img data-src={require('../../assets/images/nj/nj6.jpg')}
                                             className="swiper-lazy" alt={''}/>
                                    </div>
                                    <div className={Css['activeLoading']}></div>
                                </div>
                                <div className="swiper-slide ">
                                    <div className={Css['nj_swiper_cus_big_img']}>
                                        <div className="swiper-container" id="nj_swiper_cus_big">
                                            <div className="swiper-wrapper">
                                                <div className="swiper-slide">
                                                    <div className={Css['nj_swiper_cus_big_img_width']}>
                                                        <img data-src={require('../../assets/images/nj/nj7.jpg')} className="swiper-lazy" alt={''} />
                                                    </div>
                                                </div>
                                                <div className="swiper-slide">
                                                    <div className={Css['nj_swiper_cus_big_img_width']}>
                                                        <img data-src={require('../../assets/images/nj/nj7.jpg')} className="swiper-lazy" alt={''}/>
                                                    </div>
                                                </div>
                                            </div>
                                            <div className={Css['nj_swiper_cus_big_pagination']+' nj_swiper_cus_big_pagination'}></div>
                                        </div>
                                        <div className={Css['activeLoading']}></div>
                                    </div>
                                </div>
                                <div className="swiper-slide ">
                                    <div className={Css['nj_swiper_cus_big_img']}>
                                        <img data-src={require('../../assets/images/nj/nj6.jpg')}
                                             className="swiper-lazy" alt={''}/>
                                    </div>
                                    <div className={Css['activeLoading']}></div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </React.Fragment>
    )
})
class nj extends React.Component{
    constructor(){
        super();
        this.state={
            title:'员工节日福利_端午员工礼品_员工生日礼物-中智关爱通',
            description:'中智关爱通为企业提供节日福利、端午/中秋/新年员工礼品、员工生日礼物、夏日高温福利等解决方案，提供多元化的礼品套餐，性价比高，选择丰富，质量有保障。',
            keywords:'员工节日福利,公司员工礼品,端午员工礼品,员工生日礼物,企业福利',
            aBan:{},
            aPro:{},
            aSeed:{},
            aCus:{},
        }
    }
    componentDidMount(){
        this.goSystem();
        setTimeout(()=>{
            this.getABanData();
            this.getAProData();
            this.getASeedData();
            this.getACusData();
        },100)
        changeTdk(this.state.title,this.state.description,this.state.keywords);
        setScrollTop(window.base.pages.index.iScrollTop);
    }
    //获取ban
    getABanData(){
        let temABan={
                img:require('../../assets/images/nj/nj1.jpg'),
                title:'深耕福利领域13年 360°节日福利方案',
                list:'节日标准套餐 | 品牌实物团购 | 福利定制服务',
                btn:'立即咨询',
                url:'//dbt.zoosnet.net/LR/Chatpre.aspx?id=DBT96208203&lng=cn',
            };
        this.setState({aBan:temABan})
    }
    //获取产品
    getAProData(){
        let temAPro={
            url:'//dbt.zoosnet.net/LR/Chatpre.aspx?id=DBT96208203&lng=cn',
            pro:[
                {
                    icn:'e6d0',
                    title:'中秋节'
                },
                {
                    icn:'e613',
                    title:'新 年'
                },
                {
                    icn:'e743',
                    title:'端午节'
                },
                {
                    icn:'e64e',
                    title:'生日福利'
                },
                {
                    icn:'e631',
                    title:'妇女节'
                },
                {
                    icn:'e6ab',
                    title:'劳动节'
                },
                {
                    icn:'e61b',
                    title:'儿童节'
                },
                {
                    icn:'e6b2',
                    title:'国庆节'
                },
                {
                    icn:'ed49',
                    title:'夏日福利'
                }
            ],
            unLine:[
                {
                    icn:'e734',
                    title:'线下版节日套餐',
                    titleList:'节日套餐',
                    list:'企业管理员通过平台发放福利套餐<br />\n' +
                        '                                    支持定时发送<br />\n' +
                        '                                    员工登录个人账号（PC/APP）兑换福利<br />\n' +
                        '                                    精美电子贺卡，温馨节日祝福<br />\n' +
                        '                                    福利智能管理，数据可视易汇报',
                    img:require('../../assets/images/nj/nj2.jpg')

                },
                {
                    icn:'e614',
                    title:'线上版节日套餐',
                    titleList:'节日套餐',
                    list:'贺卡形式套餐，精美主题设计<br />\n' +
                        '                                    丰富商品选择，员工自由兑换<br />\n' +
                        '                                    网页、微信、电话三种兑换方式<br />\n' +
                        '                                    全国包邮、售后无忧、先行赔付<br />\n' +
                        '                                    支持转赠亲友传递节日祝福',
                    img:require('../../assets/images/nj/nj3.jpg')

                }
            ],
            aSup:[
                {
                    icn:'e643',
                    title:'商品价格优惠<br>正品授权保障'
                },
                {
                    icn:'e671',
                    title:'员工自由选择<br>全国包邮配送'
                },
                {
                    icn:'e6e5',
                    title:'支持拆分兑换<br>支持微信转赠'
                },
                {
                    icn:'e615',
                    title:'提供全套定制<br>彰显企业文化'
                },
                {
                    icn:'e603',
                    title:'采购便捷高效<br>售后先行赔付 '
                }
            ]
        };
        this.setState({aPro:temAPro})
    }
    //获取热卖产品
    getASeedData(){
        let temASeed={
            url:'//dbt.zoosnet.net/LR/Chatpre.aspx?id=DBT96208203&lng=cn',
           aSeedSwiper:[
               {
                   img:require('../../assets/images/nj/nj17.png'),
                   pp:'九阳',
                   name:'蒸汽低糖电饭煲'
               },
               {
                   img:require('../../assets/images/nj/nj18.png'),
                   pp:'诸老大',
                   name:'诸状元礼盒'
               },
               {
                   img:require('../../assets/images/nj/nj19.png'),
                   pp:'杏花楼',
                   name:'杏福欢喜月饼礼盒'
               },
               {
                   img:require('../../assets/images/nj/nj20.png'),
                   pp:'哈根达斯',
                   name:'关爱馨语月饼冰淇淋'
               },
               {
                   img:require('../../assets/images/nj/nj21.png'),
                   pp:'猫王',
                   name:'霹雳唱机收音机'
               },
               {
                   img:require('../../assets/images/nj/nj22.png'),
                   pp:'SKG',
                   name:'颈椎按摩器'
               }
           ],
            aSeedLogo:[
                {
                    logo:[
                        {logoImg:require('../../assets/images/nj/nj23.png')},
                        {logoImg:require('../../assets/images/nj/nj24.png')},
                        {logoImg:require('../../assets/images/nj/nj25.png')},
                        {logoImg:require('../../assets/images/nj/nj26.png')},
                        {logoImg:require('../../assets/images/nj/nj27.png')},
                    ]
                },
                {
                    logo:[
                        {logoImg:require('../../assets/images/nj/nj28.png')},
                        {logoImg:require('../../assets/images/nj/nj29.png')},
                        {logoImg:require('../../assets/images/nj/nj30.png')},
                        {logoImg:require('../../assets/images/nj/nj31.png')},
                        {logoImg:require('../../assets/images/nj/nj32.png')},
                    ]
                },
                {
                    logo:[
                        {logoImg:require('../../assets/images/nj/nj33.png')},
                        {logoImg:require('../../assets/images/nj/nj34.png')},
                        {logoImg:require('../../assets/images/nj/nj35.png')},
                        {logoImg:require('../../assets/images/nj/nj36.png')},
                    ]
                },
                {
                    logo:[
                        {logoImg:require('../../assets/images/nj/nj37.png')},
                        {logoImg:require('../../assets/images/nj/nj38.png')},
                        {logoImg:require('../../assets/images/nj/nj39.png')},
                        {logoImg:require('../../assets/images/nj/nj40.png')},
                    ]
                }
            ]
        };
        this.setState({aSeed:temASeed})
    }
    //获取定制
    getACusData(){
        let temACus={
            aCusSmall:[
                {
                    title:'卡券定制',
                    list:'专业设计团队创意卡券定制服务'
                },
                {
                    title:'平台定制',
                    list:'根据企业需求定制专属福利平台<br>彰显企业文化，激发组织活力'
                },
                {
                    title:'礼盒定制',
                    list:'员工礼品新玩法'
                },
                {
                    title:'套餐定制',
                    list:'支持调整套餐商品<br>根据需求定向拓展供应商资源'
                }
            ],
            aCusBid:[
                {
                    img:require('../../assets/images/nj/nj6.jpg')
                },
                {
                    img:require('../../assets/images/nj/nj7.jpg')
                },
                {
                    aImg:[
                        {
                            img:require('../../assets/images/nj/nj9.jpg')
                        },
                        {
                            img:require('../../assets/images/nj/nj10.jpg')
                        }
                    ]
                },
                {
                    img:require('../../assets/images/nj/nj8.jpg')
                }
            ]
        };
        this.setState({aCus:temACus})
    }
    //跳转平台
    goSystem(){
        goSystem(this.props,'nj')
    }
    //页面离开时调用，页面离开时去除滚动事件解决页面切换时内存泄漏，
    componentWillUnmount(){
        window.removeEventListener('scroll',setScrollTop());
        this.setState=(state,callback)=>{
            return;
        }
    }
    render(){
        let newProps={
            aBan:this.state.aBan,
            aPro:this.state.aPro,
            aSeed:this.state.aSeed,
            aCus:this.state.aCus,
        }

        return(
            <React.Fragment>
                <Fragment>
                    <Suspense　fallback={<div className={'loadWidth'}></div>} >
                        {/*导航*/}
                        <Nav props={this.props}></Nav>
                        {/*导航*/}
                        {/*右导航*/}
                        <RNav props={this.props}></RNav>
                        {/*右导航*/}
                    </Suspense >
                    <NjComponent {...this.props} {...newProps}></NjComponent>
                    <Suspense　fallback={<React.Fragment/>} >
                        {/*foot*/}
                        <Foot  props={this.props}></Foot>
                        {/*foot*/}
                    </Suspense>
                </Fragment>
            </React.Fragment>
        )
    }
}
export default nj